<template>
  <!-- 抽屉 -->

  <a-drawer
    title="数据报表"
    :width="screenWidth"
    @close="onClose"
    :visible="visible"
  >
    <a-card :bordered="false" v-if="visible">
      <detail-list title="商品信息">
        <detail-list-item term="商品名称">{{record.commodityName}}</detail-list-item>
        <detail-list-item term="制码数量">{{record.codeNum}}</detail-list-item>
        <detail-list-item term="扫码数量">{{record.scanCodeNum}}</detail-list-item>
      </detail-list>
      <a-tabs defaultActiveKey="1">
        <!-- 柱状图 -->
        <a-tab-pane tab="人口特征" key="1">
          <div class="flex-div">
            <div class="left">
              <PieBorderRadius :pieData="pieData" :pieTitle="pieTitle"/>
            </div>
            <div class="right">
              <s-table
                ref="table1"
                style="margin-bottom: 24px"
                :columns="pieColumns"
                :data="loadPieUserData">

              </s-table>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane tab="地域分布" key="2">
          <div class="flex-div">
            <div class="left">
              <Map title="" :mapData="mapData" :privince="privince"/>
            </div>
            <div class="right">
              <s-table
                ref="table2"
                style="margin-bottom: 24px"
                :columns="MapColumns"
                :data="loadMapContentData">

              </s-table>
            </div>
          </div>
          <div style="background: #f5f5f5;height: 10px;margin: 10px 0"></div>
          <div  class="flex-div">
            <div class="left">
              <MapCity title="" ref="mapCity" :mapData="mapCityData" :privince="cityPrivince"/>
            </div>
            <div class="right" style="margin-top: 3%">
              <div style="margin-bottom: 10px;">
                <select v-model="cityPrivince" style="width: 100px;height: 30px;" @change="switchValue">
                  <option v-for="option in privinceList" v-bind:value="option.value">
                    {{ option.text }}
                  </option>
                </select>
              </div>
              <s-table
                ref="table3"
                style="margin-bottom: 24px"
                :columns="MapCityColumns"
                :data="loadMapCityContentData">

              </s-table>
            </div>
          </div>
        </a-tab-pane>

        <!-- 柱状图 -->
        <a-tab-pane tab="访问设备" key="3">
          <div class="flex-div">
            <div class="left">
              <DiePieBorderRadius :pieData="diePieData" :pieTitle="diePieTitle"/>
            </div>
            <div class="right">
              <s-table
                ref="table4"
                style="margin-bottom: 24px"
                :columns="diePieColumns"
                :data="loadDiePieUserData">

              </s-table>
            </div>
          </div>
        </a-tab-pane>

      </a-tabs>
    </a-card>
  </a-drawer>


</template>

<script>
  import PageLayout from '@/components/page/PageLayout'
  import Map from '@/components/chart/Map'
  import MapCity from '@/components/chart/MapCity'
  import PieBorderRadius from '@/components/chart/PieBorderRadius'
  import DiePieBorderRadius from '@/components/chart/DiePieBorderRadius'
  import DetailList from '@/components/tools/DetailList'
  import ABadge from "ant-design-vue/es/badge/Badge"
  import { getAction } from '@/api/manage'
  import STable from '@/components/table/'
  const DetailListItem = DetailList.Item

  export default {
    name: 'QyCodeStatistic',
    components: {
      PageLayout,Map,PieBorderRadius,DiePieBorderRadius,MapCity,ABadge,DetailList,
      STable,DetailListItem
    },
    data() {
      return {
        height: 420,
        rankList: [],
        barData: [],
        areaData: [],
        mapData:[],
        privince:"",
        mapCityData:[],
        cityPrivince:''
        ,screenWidth: 1200,
        record:{},
        visible:false,
        pieData:[],
        pieTitle:'',
        diePieData:[],
        diePieTitle:'',
        privinceList:[],
        url:{
          spec:"/qy/qyCommodity/findUsersSpecils",
          province:"/qy/qyCommodity/findUsersProvince",
          city:"/qy/qyCommodity/findUsersProvinceCity",
          device:"/qy/qyCommodity/findUsersVisitDevice",
        },sexMap:{
          "1":"男",
          "2":"女",
          "0":"未知"
        },MapColumns: [
          {
            title: '地域',
            dataIndex: 'province',
            align:"center",
            key: 'province'
          },
          {
            title: '用户数',
            dataIndex: 'visitUsers',
            key: 'visitUsers',
            align: 'center'
          },
          {
            title: '占比',
            dataIndex: 'piece',
            key: 'piece',
            align: 'center'
          }
        ],MapCityColumns: [
          {
            title: '地域',
            dataIndex: 'city',
            align:"center",
            key: 'city'
          },
          {
            title: '用户数',
            dataIndex: 'visitUsers',
            key: 'visitUsers',
            align: 'center'
          },
          {
            title: '占比',
            dataIndex: 'piece',
            key: 'piece',
            align: 'center'
          }
        ],pieColumns: [
          {
            title: '性别',
            dataIndex: 'sex_dictText',
            align:"center"
          },
          {
            title: '用户数',
            dataIndex: 'visitUsers',
            key: 'visitUsers',
            align: 'center'
          },
          {
            title: '占比',
            dataIndex: 'piece',
            key: 'piece',
            align: 'center'
          }
        ],diePieColumns: [
          {
            title: "终端",
            dataIndex: 'visitDevice',
            align:"center"
          },
          {
            title: '用户数',
            dataIndex: 'visitUsers',
            key: 'visitUsers',
            align: 'center'
          },
          {
            title: '占比',
            dataIndex: 'piece',
            key: 'piece',
            align: 'center'
          }
        ],
        mapTotalUser:1,
        mapCityTotalUser:1,
        pieTotalUser:1,
        diePieTotalUser:1,
        // 查询条件参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadMapContentData:parameter => {
          let p = Object.assign(parameter, this.queryParam);
          p.commodityId = this.record.id;
          return this.$http.get(this.url.province, {
            params: p
          }).then(res => {
            var records = res.result.records;
            for(let a in records){
              records[a].piece = parseFloat(records[a].visitUsers/this.mapTotalUser*100).toFixed(2)+"%";
            }
            var data = {
              data: records,
              pageSize: res.result.size,
              pageNo: res.result.current,
              totalPage:res.result.pages,
              totalCount: res.result.total
            }
            return data;
          })
        },
        // 加载数据方法 必须为 Promise 对象
        loadMapCityContentData:parameter => {
          let p = Object.assign(parameter, this.queryParam);
          p.commodityId = this.record.id;
          p.province = this.cityPrivince;
          return this.$http.get(this.url.city, {
            params: p
          }).then(res => {
            var records = res.result.records;
            for(let a in records){
              records[a].piece = parseFloat(records[a].visitUsers/this.mapCityTotalUser*100).toFixed(2)+"%";
            }
            var data = {
              data: records,
              pageSize: res.result.size,
              pageNo: res.result.current,
              totalPage:res.result.pages,
              totalCount: res.result.total
            }
            return data;
          })
        },
        // 加载数据方法 必须为 Promise 对象
        loadPieUserData:parameter => {
          let p = Object.assign(parameter, this.queryParam);
          p.commodityId = this.record.id;
          return this.$http.get(this.url.spec, {
            params: p
          }).then(res => {
            var records = res.result.records;
            for(let a in records){
              records[a].piece = parseFloat(records[a].visitUsers/this.pieTotalUser*100).toFixed(2)+"%";
            }
            var data = {
              data: records,
              pageSize: res.result.size,
              pageNo: res.result.current,
              totalPage:res.result.pages,
              totalCount: res.result.total
            }
            return data;
          })
        },
        // 加载数据方法 必须为 Promise 对象
        loadDiePieUserData:parameter => {
          let p = Object.assign(parameter, this.queryParam);
          p.commodityId = this.record.id;
          return this.$http.get(this.url.device, {
            params: p
          }).then(res => {
            var records = res.result.records;
            for(let a in records){
              records[a].piece = parseFloat(records[a].visitUsers/this.diePieTotalUser*100).toFixed(2)+"%";
            }
            var data = {
              data: records,
              pageSize: res.result.size,
              pageNo: res.result.current,
              totalPage:res.result.pages,
              totalCount: res.result.total
            }
            return data;
          })
        }
      }
    },
    created() {

    },
    methods: {
      // 加载柱状图数据
      loadPieData() {
        this.confirmLoading = true;
        getAction(this.url.spec,{commodityId:this.record.id}).then((res)=>{
          if(res.success){
              if(res.result){
                this.pieTotalUser = 0;
                for(let a in res.result.records){
                  this.pieData.push({
                    value:res.result.records[a].visitUsers,
                    name:this.sexMap[res.result.records[a].sex]
                  });
                  this.pieTotalUser += res.result.records[a].visitUsers;
                }
              }
          }
        }).finally(() => {
          this.confirmLoading = false;
        });
      },
      // 加载AreaChartTy的数据
      loadDiePieData() {
        this.confirmLoading = true;
        getAction(this.url.device,{commodityId:this.record.id}).then((res)=>{
          if(res.success){
            if(res.result){
              this.diePieTotalUser = 0;
              for(let a in res.result.records){
                this.diePieData.push({
                  value:res.result.records[a].visitUsers,
                  name:res.result.records[a].visitDevice
                });
                this.diePieTotalUser += res.result.records[a].visitUsers;
              }
            }
          }
        }).finally(() => {
          this.confirmLoading = false;
        });
      },loadMapData(){
        this.confirmLoading = true;
        getAction(this.url.province,{commodityId:this.record.id}).then((res)=>{
          if(res.success){
            if(res.result){
              this.mapTotalUser = 0;
              this.privinceList = [];
              this.mapData = [];
              for(let a in res.result.records){
                this.mapData.push({
                  value:res.result.records[a].visitUsers,
                  name:res.result.records[a].province
                });
                if(a==0){
                  this.cityPrivince = res.result.records[a].province;
                  this.loadMapCityData();
                }
                this.privinceList.push({
                  text:res.result.records[a].province,
                  value:res.result.records[a].province
                });
                this.mapTotalUser += res.result.records[a].visitUsers;
              }
            }
          }
        }).finally(() => {
          this.confirmLoading = false;
        })
      },loadMapCityData(){
        this.confirmLoading = true;
        getAction(this.url.city,{commodityId:this.record.id,province:this.cityPrivince}).then((res)=>{
          if(res.success){
            if(res.result){
              this.mapCityTotalUser = 0;
              this.mapCityData = [];
              for(let a in res.result.records){
                this.mapCityData.push({
                  value:res.result.records[a].visitUsers,
                  name:res.result.records[a].city
                });
                this.mapCityTotalUser += res.result.records[a].visitUsers;
              }

              this.$refs.mapCity.changeOption(this.mapCityData,this.cityPrivince);
            }
          }
        }).finally(() => {
          this.confirmLoading = false;
        })
      },edit(record) {
        this.visible = true;
        this.record = record;
        this.pieTitle="性别分布";
        this.pieData = [];
        this.loadPieData();
        this.diePieTitle="终端分布";
        this.diePieData = [];
        this.loadDiePieData();
        var that = this;
        setTimeout(function () {
          that.loadMapData();
        },300);
      },onClose(){
        this.visible = false;
      },switchValue(){
        this.loadMapCityData();
        this.$refs.table3.searchTab();
      }
    }
  }
</script>
<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .statistic {
    padding: 0px !important;
    margin-top: 50px;
  }

  .statistic h4 {
    margin-bottom: 20px;
    text-align: center !important;
    font-size: 24px !important;;
  }

  .statistic #canvas_1 {
    width: 100% !important;
  }

  .flex-div{
    display: flex;
  }

  .left{
    width:49%;
  }
  .right{
    width: 42%;
    margin-left: 8%;
    margin-top: 6%;
  }

</style>